<template>
  <div id="LiveForDetails">
    <div class="header">直播详情</div>
    <input type="search" class="search" placeholder="数据更新时间">
	<div class="box">
		<div class="box-1">
			<img src="https://img01.yzcdn.cn/vant/ipad.jpeg" class="jpg">
			<div>
				<div class="title">标题</div>
				<div>直播时长</div>
				<div>开始时间</div>
				<div>结束时间</div>
			</div>
		</div>
		
	</div>
    
  </div>
</template>
<script>
import Vue from "vue";
import { Search} from "vant";
Vue.use(Search);
export default {
  data() {
    return {
      value: "",
    };
  },
};
</script>
<style lang="less" scoped>
*{
	margin: 0;
	padding: 0;
}
#LiveForDetails {
  min-height: 100vh;
  width: 100%;
  background: #fff;
  .header {
    width: 1.8rem;
    height: 0.4rem;
    font-family: PingFangSC-Medium;
    font-size: 0.426667rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 0.4rem;
    letter-spacing: 0px;
    color: #222222;
    margin: .92rem auto 0;
  }
  .search{
	width: 9.2rem;
	height: .88rem;
	background-color: #f5f5f5;
	border-radius: .133333rem;
	border: solid 1px #e5e5e5;
	display: inline-block;
	margin:.586667rem .4rem .413333rem;
	padding-left: 1.28rem;
	
  }
  .search::-webkit-input-placeholder{
	font-family: PingFangSC-Regular;
	font-size: .346667rem;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: .013333rem;
	color: #888888;
	line-height: .88rem;
	margin-left:1.28rem ;
  }
  .box{
	  width: 9.146667rem;
	  height: 6.266667rem;
	  background: #f1f1f1;
	  margin: auto;
	 
  }
  .jpg{
	  width: 2.106667rem;
	height: 2.64rem;
	background-color: #ff7500;
	border-radius: .266667rem;
	border: solid .013333rem #e5e5e5;
	margin-right: .32rem;
  }
  .box-1{
 	display: flex;
  }
  .title{
	  width: 507px;
	height: 67px;
	font-family: PingFangSC-Medium;
	font-size: 30px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 38px;
	letter-spacing: 0px;
	color: #222222;
  }
}
</style>
